<template>
  <div id="VNumberSelect" v-popover:popover4 class="iconfont icon-optimise">
    <el-popover
      ref="popover4"
      v-model="visible"
      width="320"
      placement="bottom"
      trigger="click">
      <div class="first-child" v-if="type == 'all'">
          <div class="radio-item"><el-radio v-model="radio" label="1">使用离散数字(没有区间)</el-radio></div>
          <div class="radio-item"><el-radio v-model="radio" label="2" style="margin: 12px 0">使用默认区间</el-radio></div>
          <div class="radio-item"><el-radio v-model="radio" label="3">使用自定义区间</el-radio></div>
          <el-collapse-transition>
            <div v-show="isShow">
              <div class="listItem" v-for="(item,index) in inputs" :key="index">
                区间{{index+1}}：
                [
                <span class="item">
                  <span v-if="index==0"  style="width: 70px;display: inline-block">{{inputs[index].start}}</span>
                  <el-input v-model="inputs[index].start" size="mini" style="width: 70px;height: 24px;" v-if="index!=0" disabled></el-input>
                </span>,
                <span class="item">
                  <span v-if="index==inputs.length-1"  style="width: 70px;display: inline-block">{{inputs[index].end}}</span>
                  <el-input  v-if="index!=inputs.length-1" v-model="inputs[index].end" size="mini" style="width: 70px;height: 24px;"></el-input>
                </span>
                <span>)</span>
                <span v-if="index==inputs.length-1&&inputs.length!=2" class="iconfont icon-close cursor" @click="del"></span>
              </div>
              <div @click="add" class="cursor" style="color: #016DFB;margin-top: 15px"><i class="iconfont icon-add"></i>增加区间</div>
            </div>
          </el-collapse-transition>
        <div class="bottomBtn">
          <el-button type="primary" size="mini" @click="visible=false">取消</el-button>
          <el-button type="success" size="mini" @click="sure">确定</el-button>
        </div>
      </div>
      <div class="second-child" v-if="type == 'time'">
        <el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div style="margin: 15px 0"><el-radio v-model="radio1" label="1">汇总</el-radio></div>
        <div><el-radio v-model="radio1" label="2">不汇总</el-radio></div>
      </div>
    </el-popover>
  </div>
</template>

<script>
  export default {
    model: {
      prop: 'modelValue',
      event: 'change'
    },
    props: {
      modelValue: '',
      type: '',
      options: Array
    },
    data () {
      return {
        radio: '',
        radio1: '',
        visible: false,
        inputs: [
          {
            start: '-∞', end: ''
          },
          {
            start: '', end: '+∞'
          }
        ],
        dataModelValue: this.modelValue,
        value: '',
        isShow: false
      }
    },
    methods: {
      add () {
        this.inputs.splice(this.inputs.length - 1, 0, {start: '', end: ''})
      },
      del () {
        if (this.inputs.length === 2) return
        this.inputs.splice(this.inputs.length - 2, 1)
      },
      sure () {
        this.visible = false
        if (this.radio === '3') {
           this.$emit('change', this.dataModelValue = this.inputs)
        } else {
          this.$emit('change', this.dataModelValue = this.radio)
        }
      }
    },
    watch: {
      radio: function () {
        if (this.radio === '3') {
         this.isShow = true
        } else {
          this.isShow = false
        }
      },
      inputs: {
        handler: function (val, oldVal) {
          for (let i = 0; i < this.inputs.length; i++) {
            if (i !== 0) {
              this.inputs[i].start = this.inputs[i - 1].end
            }
          }
          },
        deep: true
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #VNumberSelect:hover
    color  #016DFB
  #VNumberSelect
    color  #D8DCE5
    width 15px;
    height 20px;
    border none
    font-size 20px;
  .radio-item
    width 255px;
  .listItem
    margin-top 10px
    .item
      display inline-block
      margin 0 10px
  .bottomBtn
    height 30px
    margin-top 20px;
    text-align right
  .el-radio+.el-radio
   margin 0
</style>
